<script>
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:3001'
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            blogForm: {
                title: '',
                body: '',
                category: []
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题,不少于3字符', trigger: 'blur',min:3 },
                ],
                body: [
                    { required: true, message: '请输入内容,不少于20字符', trigger: 'blur',min:20 },
                ],
                category: [
                    { type: 'array', required: true, message: '请选择类别', trigger: 'change' },
                ]
            }
        }
    },
    methods:{
            saveBlog(){
               this.blogForm.id=new Date().getTime()
               axios.post('blog',this.blogForm).then(res=>{
                   console.log(res)
               })
               ElMessage({
                showClose: true,
                message:'博客发布成功',
                type:'success'

               })
               this.$router.push('/blog/list')
            },
            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields()
            }
    }
}
</script>
<template>
    <div class="add">
        <el-form :model="blogForm"
        :rules="rules" ref="blogForm" label-width="100px" class="demo-ruleForm" @submit.prevent="saveBlog">
        <el-form-item label="博客标题" prop="title">
            <el-input v-model="blogForm.title"></el-input>
        </el-form-item>
        <el-form-item label="博客内容" prop="body">
            <el-input type="textarea" v-model="blogForm.body" rows="10"></el-input>
        </el-form-item>
        <el-form-item label="博客类别" prop="category">
            <el-checkbox-group v-model="blogForm.category">
                <el-checkbox label="前端" name="type"></el-checkbox>
                <el-checkbox label="后端" name="type"></el-checkbox>
                 <el-checkbox label="兴趣" name="type"></el-checkbox>
                  <el-checkbox label="生活" name="type"></el-checkbox>
                   <el-checkbox label="其他" name="type"></el-checkbox>
                    <el-checkbox label="测试" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
    
        <el-form-item>
            <el-button type="primary" native-type="submit">保存</el-button>
            <el-button @click="resetForm('blogForm')">重置</el-button>
        </el-form-item>
</el-form>
</div>

</template>
<style></style>